<template>
  <div class="base-index positRel">
    <div class="index-content">
      <MenuLocation :title="'实践实训基地'"></MenuLocation>
      <div class="base-list">
        <div class="top-content">
          <div class="base-head">
            <div class="base-type">
              <span class="title">实践实训基地类型:</span>
              <div class="type-btn" :class="{'active':selId == item.id }" v-for="item in baseType" :key="item.id" @click="selType(item)">
                {{ item.name }}
              </div>
            </div>
            <div>
              <Date-picker v-model="timeStr" @on-change="timeChange" format="yyyy-MM-dd" type="date" placement="bottom-end" placeholder="选择日期" style="width: 300px"></Date-picker>
            </div>
            <div class="base-search">
              <Input v-model="seachName" placeholder="实践实训基地名称搜索" />
              <div class="search-btn" @click="getDataPage">
                <img class="search" src="@/assets/base/search.png" alt="" />
              </div>
            </div>
          </div>
          <div class="sort">
            <div class="sort-row" v-for="(item,index) in sort" :key="item.name" @click="setSort(item.type,index)">
                <span class="title" :style="item.type == sortSearch ? 'color:#FD5151' : 'color:#63676E'">{{item.name}}</span>
                <img class="sort-img" :src="item.type == sortSearch ? require('@/assets/base/sorted.png') : require('@/assets/base/sort.png')" alt="">
            </div>
          </div>
          <div class="base-row">
            <div class="base-card" v-for="(item,index) in tableData" :key="index" :style="index > 2 ? 'margin-top:calc(40/1920*100vw)' : ''">
                <div class="base-face">
                    <div class="score-bg">
                        {{item.grade}}分
                    </div>
                    <img :src="item.trainingBaseCover" />
                </div>
                <div class="information">
                    <span class="base-name">{{item.name}}</span>
                    <div class="introduce">
                        <div>{{item.trainingBase.length > 25 ? item.trainingBase.substring(0,25) + '...' : item.trainingBase}} <span class="detail" @click="detailBtn(item, '概览')">详情</span></div>
                    </div>
                    <div class="remaining">
                        <img class="movie" src="@/assets/base/movie2.png" alt="">
                        <span>余：{{item.remain}}</span>
                    </div>
                    <div class="appointment">
                        <div class="appointment-btn" :class="{ disabled: item.remain == 0 }" @click="detailBtn(item, '预约')">预约</div>
                        <span v-if="item.isCharge == '1'" class="price">￥{{item.unitPrice}}/小时</span>
                        <span v-else class="price">免费</span>
                    </div>
                </div>
            </div>
            <empty v-if="tableData.length===0" />
          </div>
        </div>
        <div class="page">
          <Page
            :total="page.total"
            :page-size="page.pageSize"
            size="small"
            show-sizer
            show-total
            show-elevator
            :page-size-opts="size"
            @on-change="changeCurrent"
            @on-page-size-change="sizeChange"
          />
        </div>
      </div>
    </div>
    <Footer :top="20"></Footer>
  </div>
</template>
<script>
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import Footer from "@/components/footer/my_footer.vue";
import {getBaseTypeList,getBasePage} from "@/api/yk_record"
export default {
  data() {
    return {
      sortOrder:1,
      page: { // 请求参数
        total: 0,
        pageNumber: 1,
        pageSize: 10
      },
      baseType: [],
      selId:'',
      timeStr:'',
      seachName:'',
      sort: [
        { name: "综合排序",type:'comprehensive', checked: true },
        { name: "评分",type:'goods', checked: false },
        { name: "余量",type:'hot', checked: false },
        { name: "收费",type:'sell', checked: false },
      ],
      //排序方式
      sortSearch: "comprehensive",
      tableData: [],
      size: [1],
    };
  },
  mounted(){
    this.getTypeData()
  },
  methods: {
    getDataPage(){
      let params = {
        name: this.seachName,
        type: this.selId,
        searchTimeBegin: this.timeStr,
        page: this.page.pageNumber,
        rows: this.page.pageSize,
      }
      getBasePage(params).then((res) =>{
        if(res.code == '200'){
            this.page.total = Number(res.result.total)
            this.tableData = res.result.records
          this.tableData.forEach((item) =>{
              item.trainingBase = this.getText(item.trainingBaseDetail)
              item.grade = ((Number(item.grade) * 10).toFixed(0)) / 10
          })
        }else {
          this.$Message.error(res.message || '获取失败!')
        }
      })
    },
    getText(data){
      let value = data
      value= value.replace(/<[^>]+>/g, ""); //去掉所有的html标记
      value = value.replace(/↵/g, "");     //去掉所有的↵符号
      value = value.replace(/[\r\n]/g, "") //去掉回车换行
      value = this.convertIdeogramToNormalCharacter(value);
      return value
    },
    convertIdeogramToNormalCharacter(val) {
      const arrEntities = {'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
      return val.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    },
    timeChange(e){
      this.timeStr = e
      this.getDataPage()
    },
    getTypeData(){
      getBaseTypeList().then((res) =>{
        if(res.code == '200'){
          this.baseType = res.result
          this.baseType.unshift({
            name:'全部',
            id: ''
          })
          this.selId = res.result[0].id
          this.getDataPage()
        }else {
          this.$Message.error(res.message || '获取失败!')
        }
      })
    },
    selType(item){
      this.selId = item.id
      this.getDataPage()
    },
    changeCurrent(current) {
      this.page.pageNumber = current;
      this.getDataPage();
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.getDataPage();
    },
    //跳转场地详情
    detailBtn(v, tab) {
      if (v.remain > 0 || tab == '概览') {
        this.$router.push({
          path: "/baseDetail",
          query:{
            tab: encodeURIComponent(tab),
            disabled: v.remain == 0,
            id: v.id,
          }
        });
      }

    },
    // 点击排序
    setSort(type) {
      this.sortSearch = type;
        this.sortOrder = this.sortOrder ? 0 : 1
      if (this.sortSearch === "comprehensive") {
        this.getDataPage();
      } else if (this.sortSearch === "goods") {
        this.tableData.sort(this.compare("grade"));
      } else if (this.sortSearch === "hot") {
        this.tableData.sort(this.compare("remain"));
      } else {
        this.tableData.sort(this.compare("unitPrice"));
      }
    },
    //排序工具
    compare(property) {
      const that = this
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        if(that.sortOrder)  {
          return value2 - value1;
        } else {
          return value1 - value2;
        }

      };
    },
  },
  components: {
    MenuLocation,
    Footer,
  },
};
</script>
<style lang="scss" scoped>
.base-index {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  .index-content {
    padding: 0px calc(150 / 1920 * 100vw);
    flex: 1;
    .base-list {
      background: #fff;
      border-radius: calc(5 / 1920 * 100vw);
      .top-content {
        padding: 0px calc(30 / 1920 * 100vw);
        min-height: calc(100vh - (80 / 1920 * 100vw));
        display: flex;
        flex-direction: column;
        .base-head {
          height: calc(73 / 1920 * 100vw);
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #E3E3E3;
          .base-type {
            display: flex;
            align-items: center;
            .title {
              color: #999999;
              font-size: calc(14 / 1920 * 100vw);
              margin-right: calc(10 / 1920 * 100vw);
            }
            .type-btn {
              display: flex;
              align-items: center;
              justify-content: center;
              height: calc(32 / 1920 * 100vw);
              width: calc(90 / 1920 * 100vw);
              border: 1px solid #ededed;
              border-radius: calc(4 / 1920 * 100vw);
              margin-left: calc(12 / 1920 * 100vw);
              color: #999999;
              font-size: calc(14 / 1920 * 100vw);
              cursor: pointer;
            }
            .active{
              background: #fd5151;
              color: #fff;
            }
          }
          .base-search {
            width: calc(228 / 1920 * 100vw);
            height: calc(34 / 1920 * 100vw);
            display: flex;
            border-radius: calc(4 / 1920 * 100vw);
            border: calc(1 / 1920 * 100vw) solid #ededed;
            overflow: hidden;
            .search-btn {
              width: calc(51 / 1920 * 100vw);
              height: calc(34 / 1920 * 100vw);
              background: #fd5151;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              .search {
                width: calc(17 / 1920 * 100vw);
                height: calc(17 / 1920 * 100vw);
              }
            }
          }
        }
        .sort{
            display: flex;
            margin-top: calc(11 / 1920 * 100vw);
            margin-left: auto;
            .sort-row{
                display: flex;
                align-items: center;
                margin-left: calc(30 / 1920 * 100vw);
                cursor: pointer;
                .title{
                    font-size: calc(14 / 1920 * 100vw);
                }
                .sort-img{
                    width: calc(7 / 1920 * 100vw);
                    height: calc(11 / 1920 * 100vw);
                    margin-left: calc(4 / 1920 * 100vw);;
                }
            }
            .sort-row:first-of-type{
                margin-left: calc(0 / 1920 * 100vw);
            }
        }
        .base-row{
          display: flex;
          grid-template-columns: repeat(3,1fr);
          margin-top: calc(32 / 1920 * 100vw);
          flex-wrap: wrap;
            .base-card{
                width: calc(484 / 1920 * 100vw);
                height: calc(170 / 1920 * 100vw);
                display: flex;
                .base-face{
                    width: calc(180 / 1920 * 100vw);
                    height: calc(170 / 1920 * 100vw);
                    border-radius: calc(5 / 1920 * 100vw);
                    overflow: hidden;
                    position: relative;
                    img {
                      width: auto;
                      height: 100%;
                      object-fit: cover;
                    }
                    .score-bg{
                        position: absolute;
                        width: calc(75 / 1920 * 100vw);
                        height: calc(28 / 1920 * 100vw);
                        background-color: rgba(0, 0, 0, 0.5);
                        border-bottom-right-radius: calc(10 / 1920 * 100vw);
                        font-size: calc(14 / 1920 * 100vw);
                        color: #fff;
                        text-align: center;
                        line-height: calc(28 / 1920 * 100vw);
                    }
                }
                .information{
                    margin-left: calc(20 / 1920 * 100vw);
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    justify-content: space-between;
                    .base-name{
                      font-size: calc(16 / 1920 * 100vw);
                      color: #333;
                    }

                    .introduce{
                      font-size: calc(14 / 1920 * 100vw);
                      color: #999999;
                      .detail{
                        color: #333333;
                        cursor: pointer;
                        border-bottom: 1px solid #333333;
                      }
                    }
                    .remaining{
                      .movie{
                        width: calc(16 / 1920 * 100vw);
                        height: calc(13 / 1920 * 100vw);
                      }
                      >span{
                        font-size: calc(14 / 1920 * 100vw);
                        color: #F4333C;
                        margin-left: calc(4 / 1920 * 100vw);;
                      }
                    }
                    .appointment{
                      display: flex;
                      align-items: center;
                      .appointment-btn{
                        width: calc(96 / 1920 * 100vw);
                        height: calc(40 / 1920 * 100vw);
                        background: #F4333C;
                        border-radius: calc(4 / 1920 * 100vw);
                        color: #fff;
                        text-align: center;
                        line-height: calc(40 / 1920 * 100vw);
                        cursor: pointer;
                      }
                      .disabled {
                        cursor: not-allowed;
                        background: #a0a0a0;
                      }
                      .price{
                        margin-left: calc(12 / 1920 * 100vw);
                        color: #F4333C;
                        font-size: calc(16 / 1920 * 100vw);
                      }
                    }
                }
            }
        }
      }
      .page {
        width: 100%;
        height: calc(44 / 1920 * 100vw);
        margin-top: calc(12 / 1920 * 100vw);
        box-shadow: 0px calc(-3 / 1920 * 100vw) calc(3 / 1920 * 100vw) #c8c8c8;
        padding: 0px calc(12 / 1920 * 100vw);
        display: flex;
        align-items: center;
        .ivu-page {
          margin-left: auto;
        }
      }
    }
  }
}
:deep(.ivu-input) {
  height: calc(34 / 1920 * 100vw);
  border: none;
}
</style>
